<template>
    <div style="padding-bottom:0px;text-align:right">
        <div class="map" id="map-container">
            <div id="panel" v-show="dcc">
            </div>
        </div>

    </div>
</template>

<script>
//引入高德地图
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
    securityJsCode: '8bc667f47a733d5c4031248368c46caf' //你的安全密钥
}
let mymap = null;
export default {
    name: '',
    props: ['longitude', 'latitude'],
    data() {
        return {
            dcc: false,
            location: "", // input的内容
            map: null, //
            lnglat: [], // 经纬度数组 [lng,lat]
            auto: null,
            placeSearch: null,
            markers: [],
            driving: null,
            longitude1: '',
            latitude1: '',
            formInline: {
                Addresssearch: '',
            },
        }
    },
    created() {

    },
    mounted() {
        AMapLoader.reset()
        //DOM初始化完成进行地图初始化
        this.initMap();
    },
    beforeDestroy() {
        if (!mymap) {
            return
        }
        this.latitude1 = "";
        this.longitude1 = "";
        mymap.destroy()
        mymap = null
    },

    methods: {
        initMap() {
            AMapLoader.load({
                key: "b4dc067f2a3f52770d4c47d96a0499a9", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
            })
                .then((AMap) => {
                    mymap = new AMap.Map("map-container", {
                        // 设置地图容器id
                        viewMode: "2D", //  是否为3D地图模式
                        zoom: 13, // 初始化地图级别
                        center: [122.469019, 30.720894], //中心点坐标
                        resizeEnable: true,
                    });
                    // 监听鼠标点击事件
                    mymap.on("click", this.clickMapHandler);
                    // 函数调用（写入你先所需要的事件函数）
                    // this.searchMap(); // POI关键字搜索



                })
                .catch((e) => {
                    console.log(e);
                });
        },
        //确定事件
        confirmPos() {
            this.$emit('getPos', {
                lon: this.longitude1,
                lat: this.latitude1
            })
            this.longitude1 = '';
            this.latitude1 = '';
            this.formInline.Addresssearch = '';
        },
        // 点击地图事件获取经纬度，并添加标记
        clickMapHandler(e) {
            //  this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];

            this.longitude1 = e.lnglat.getLng();
            this.latitude1 = e.lnglat.getLat();
        },

        // 地图关键字查询
        onSubmit() {
            //  this.dcc = true;
            // 清除地图上所有添加的覆盖物
            mymap.clearMap();
            // 地址搜索
            if (!this.formInline.Addresssearch) return;

            let that = this;
            let placeSearch = new AMap.PlaceSearch({
                city: '嵊泗县', // 兴趣点城市，支持城市名、citycode、adcode
                citylimit: true, // 是否强制在设置的城市内搜索，默认false
                // type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
                pageSize: 50, // 每页条数，默认10，范围1-50
                pageIndex: 1, // 页码
                // extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息
                map: mymap, // 地图实例，可选
                //   panel: 'panel', // 结果列表的id容器，可选
                autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围
            })
            placeSearch.search(that.formInline.Addresssearch, function (status, result) {
                mymap.clearMap() // 清除地图上所有添加的覆盖物
                //  console.log(status, result)
                // 监听鼠标点击事件
                // mymap.on("click", this.clickMapHandlerjwd);
                console.log(result.poiList.pois)
                var pois = result.poiList.pois;

                // 循环遍历所有点标记数组中的元素
                for (var i = 0; i < pois.length; i++) {
                    // 创建点标记
                    var marker = new AMap.Marker({
                        position: [pois[i].location.lng, pois[i].location.lat], // 设置点标记位置
                        title: pois[i].address + pois[i].name, // 设置点标记标题
                        map: mymap // 将点标记添加到地图上
                    });

                    // 给每个点标记添加一个点击事件
                    //  let that=this;
                    marker.on("click", (e) => {
                        // 获取当前点标记的信息
                        console.log('111111111111111111', e.target._originOpts.title)
                        console.log(e.lnglat.lat, e.lnglat.lng);
                        that.longitude1 = e.lnglat.lng;
                        that.latitude1 = e.lnglat.lat;
                        that.$message({
                            showClose: true,
                            message: e.target._originOpts.title,
                            type: 'success'
                        });
                    });
                }


                //  for(var i = 0; i < pois.length; i++){
                //      var poi = pois[i];
                //      var marker = [];
                //      marker[i] = new AMap.Marker({
                //          position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                //          title: poi.name
                //      });
                //      // 将创建的点标记添加到已有的地图实例：
                //     mymap.add(marker[i]);
                //
                //  }
                // // marker.on('click', this.markerClick);
                // mymap.setFitView();
            })
        },


    },
    watch: {},

}
</script>

<style scoped>
#panel {
    position: absolute;
    background-color: white;
    max-height: 500px;
    overflow-y: auto;
    top: 10px;
    right: 10px;
    bottom: 0px;
    width: 280px;
    z-index: 99999;
}

.set .map {
    height: 600px;
}

#map-container {
    width: 100%;
    height: 500px;
    padding-bottom: 60px;
    position: relative;
}

.Addresssearch {
    height: 50px;
    width: 100%;
    background: #fff;
    padding: 5px 0 0 10px;
    margin-top: -10px;
    margin-bottom: 10px;
}

.fixBtn {
    margin-top: 20px;
    /* bottom: 10px;
    right: 0%;
    height: 35px;
    width: 120px;
    z-index: 99; */
}
</style>
